<template>
  <div class="list-classfiy">
    <!-- 左边 -->
    <div class="title_product" ref="title_product">
      <ul>
        <li
          v-for="(item, index) in classify.productList"
          v-bind:key="index"
          :class="{ light: index == num }"
          @click="num = index"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <!-- 右边 -->
    <div class="product-list">
      <ul>
        <li v-for="(item, index) in classify.productList" :key="item.id"
        >
          <div class="product-good" ref="list">
            <div class="pro-txt">
              <span>{{ item.name }}</span>
            </div>
            <div
              class="shop-pro"
              v-for="item in classify.productList[index].children"
              :key="item.id" @click="backTo(item.cate_name)"
            >
              <div class="commod">
                <div class="pro-img">
                  <img :src="item.pic" alt="" />
                </div>
                <div class="pro-name">
                  <span>{{ item.cate_name }}</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  data() {
    return {
      titleList: [ ],
      num: 0,
    };
  },
  watch:{
      num(){
        document.documentElement.scrollTop = this.$refs.list[this.num].offsetTop - 60;
      }
  },
  methods: {
    addFunc(index) {
      this.num = index;
    },
    backTo(cate_name){
      let name = cate_name;
      // console.log(name);
      this.$router.push({path:'/product',name:"Product",params:{v1:name}})
    },
    getData(){
      let arr = this.$store.state.classify.productList;
      //  console.log(this.$store.state.classify.productList[0].children);
       arr.forEach( item => {
         let obj = {};
         obj.id = item.id;
         obj.name = item.name;
         this.titleList.push(obj);
       })
      //  console.log(this.titleList);
    }
  },
  computed:{
    ...mapState(['classify']),
  },
  created(){
    this.getData();
  },
  mounted(){
      window.addEventListener("scroll",()=> {
        let list = this.$refs.list;
        let num = [...list];
        // console.log(num.length);
         for(let i = 0;i < num.length;i ++){
           if(this.$refs.list[i].offsetTop >= document.documentElement.scrollTop){
             this.num = i;
             break;
           }
         }
      })
  }
};
</script>

<style lang="less">
@import "../assets/css/reset.css";
@import "../assets/less/variable.less";

.list-classfiy {
  width: 100%;
}
.title_product {
  width: 30%;
  height: 600px;
  float: left;
  background: #f1f1f1;
  z-index: 1000;
  position: fixed;
  margin-top: 60px;
  ul li {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
    background: #f1f1f1;
    &.light {
      background: #fff;
      font-weight: 600;
      font-size: 20px;
      border-left: 2px solid #cf3bed;
    }
  }
}
.product-list {
  float: left;
  width: 70%;
  height: 100%;
  background: #fff;
  margin-left: 30%;
  margin-top: 60px;
}
.product-good {
  width: 240px;
  margin-left: 10px;
  margin-top: 10px;
  .pro-txt {
    font-size: 18px;
    font-weight: 600;
    width: 80px;
    height: 45px;
    line-height: 45px;
    display: inline-block;
    // background: palevioletred;
  }
  .commod {
    width: 80px;
    height: 120px;
    text-align: center;
    float: left;
    // background: peachpuff;
    .pro-img {
      width: 76px;
      height: 80px;
      margin-top: 10px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .pro-name {
      font-size: 16px;
    }
  }
}
</style>